Breadcrumb
Letztes Update:
21. September 2023
Entwurf – Inhalt noch in Arbeit
Symbolbild
Wie hilft dieses Element den Nutzern?
Breadcrumbs dienen als sekundäres Navigationselement der schnelleren Orientierung. Nutzer erkennen daran, auf welcher Ebene sie sich im hierarchischen Pfad befinden und können die Ebene auch rasch wechseln. Dies hilft den Nutzern sich besser zurecht zu finden.
Wann kommt dieses Element zum Einsatz?
3 Arten von Breadcrumbs:
- Path-Breadcrumbs: die Breadcrumb zeigt den jeweiligen Klickpfad bzw. die zuletzt aufgerufenen Elemente des Users
- Location-Breadcrumb (hierarchisch): Zeigt die Hierarchie der Webseite und die aktuelle Position des Nutzers
- Attribute-Breadcrumb: zeigt anhand von Meta-Informationen die Navigation, die zum aktuell aufgerufenen Element führt – zumeist Kategorieseiten.
Zum Einsatz kommen ausschließlich die hierarchisch aufgebaute Location-Breadcrumb in Hybridversion mit der Attribute-Breadcrumb.
UX Konzeption
Positionierung
Die Breadcrumb-Navigation wird über dem Hauptinhalt der Webseite positioniert. Ein zweites mal findet sie sich über dem Footer.
Navigationselemente
Jedes in der Breadcrumb angezeigte Elemente ist mit der jeweiligen Seite verlinkt, damit der Nutzer diese auch zur Navigation nutzen kann.
Strukturierte Daten / Schema.org
Auf den Plattformen und in E-Mail Nachrichten wie beispielsweise Newslettern kommen Schemata für strukturierte Daten zum Einsatz. Diese ermöglichen unter anderem Anwendungen von Google, Microsoft, Pinterest etc. mittels dieser Informationen reichhaltigere und für die Nutzer passende Inhalte anzuzeigen.
Einführung in das Markup für strukturierte Daten in der Google Suche
Details zu den für Plattformen und E-Mail Nachrichten zu verwendende Schemata:
- Meta Tags und Strukturierte Daten
- https://schema.org/
- Einführung in das Markup für strukturierte Daten in der Google Suche auf developers.google.com
- Breadcrumb: https://schema.org/BreadcrumbList
- https://developers.google.com/search/docs/appearance/structured-data/breadcrumb?hl=de
Weiterführendes zu Zugänglichkeit und Barrierefreiheit
Richtlinie für barrierefreie Webinhalte (WCAG)
Die Richtlinien für barrierefreie Webinhalte (WCAG) beinhaltet Prinzipien, Richtlinien und Erfolgskriterien um Webinhalte barrierefreier zu gestalten. Die Grundlagen zur Zugänglichkeit sind in der Guideline eingearbeitet. Details finden sich unter Richtlinien für barrierefreie Webinhalte WCAG.
Accessible Rich Internet Application (ARIA)
ARIA-Spezifikationen sind eine definierte Semantik für Barrierefreiheit und wird verwendet, um barrierefreie Webumgebungen zu erstellen. Anleitungen, Muster und funktionale Beispiele finden sich unter https://www.w3.org/WAI/ARIA/apg/.
Detailliertere Informationen für vorliegendes Element:
Kennzeichnung nötig: aria-label=“pfad“
UX-Writing
Was ist zu texten
- Linktexte
Wie ist zu texten
Es gelten die allgemeinen Regeln zu Text formulieren – interessant, verständlich und vertrauenswürdig schreiben und folgende spezifische Vorgaben:
- kurz, prägnant und aussagekräftig
- im Idealfall nur 1 bis max. 2 Worte
- Artikel können gestrichen werden
- relevante Keywords verwenden
- Begriffe müssen auch ohne Kontext erklären zu welchen Inhalten sie führen
UI-Design
Verhaltensregeln (Dos&Donts)
Positionierung und Abstände zu anderen Elementen
Verwendungsbeispiele
Hilfreiches
Ähnliche Elemente
- Listen
- Durchläuft ein Nutzer einen strukturierten Ablauf, ist eine Fortschrittsanzeige anstelle einer Breadcrumb zu verwenden.